
<script lang="ts" setup>
import { onMounted} from 'vue'
import { useTianDiTu, useMap } from '../../hooks/map'
import { View } from 'ol';
const props = withDefaults(defineProps<{
    target: string,
    height: string,
    width: string
}>(), {
    target: 'map',
    height: '100vh',
    width: '100%'
})
const { createTitleLayer } = useTianDiTu()
const { setMap } = useMap()
const key = 'b945c29c5388432e34b51b5d824d8157'

onMounted(() => {
    setMap({
        target: props.target,
        layers: [
            createTitleLayer('vec_w', key),
            createTitleLayer('cia_w', key)
        ],
        view: new View({
            center: [113.75395, 34.76572],
            zoom: 8,
            projection: "EPSG:4326"
        })
    })
})
</script>
<template>
    <div class="map">
        <div :id="target" class="map-containder"></div>
        <div class="map-containder-content">
            <slot></slot>
        </div>
    </div>
</template>

<style >
.map-containder {
    /* position: relative; */
    height: v-bind(height);
    width: v-bind(width);
}

.map-containder-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}</style>